
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;}
		.custom-tooltip{
			padding:6px;
			width: 135px;
			height: 84px;
			opacity: 0.9;
			background: #0d1c28;
			box-shadow: 0px 1px 6px 0px rgba(54,76,127,0.38); 
		}
		.custom-tooltip .circle{
			display: inline-block;
			width: 4px;
			height: 4px;
			background: #5AD8A6;
			vertical-align: middle;
			border-radius: 50%;
		}
		.custom-tooltip .circle-1{
			display: inline-block;
			width: 4px;
			height: 4px;
			background: #E86452;
			vertical-align: middle;
			border-radius: 50%;
		}
		.custom-tooltip .circle-2{
			display: inline-block;
			width: 4px;
			height: 4px;
			background: #5B8FF9;
			vertical-align: middle;
			border-radius: 50%;		}
		.custom-tooltip .text{
			font-size: 12px;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: left;
		}
		.custom-tooltip .text-1{
			margin-left: 10px;
		}
		.custom-tooltip .p{
			display: inline-block;
			color: #fff;
		}
		.custom-tooltip .num{
			font-size: 14px;
			font-family: DINAlternate, DINAlternate-Bold;
			font-weight: 700;
			text-align: left;
			color: #ffffff;
			float: right;
			margin-top: 2px;
		}
		.custom-tooltip .color-575962{
			color: rgba(255,255,255,0.65);
			font-size: 12px;
		}
		.custom-tooltip .line{
			width: 133px;
			opacity: 0.26;
			margin: auto;
			border: 1px dashed #ffffff;
			margin: 8px 0px;
		}
		.fr {
			float: right;
		}
		</style>
	</head>
	<body>
		<div class="custom-tooltip">
			<div class="list">
				<div class="item">
					<p class="p">
						<span class="circle"></span>
						<span class="text">自检成功数：</span>
					</p>
					<p class="p num">
						56.0%
					</p>
				</div>
			</div>
			<div class="list">
				<div class="item">
					<p class="p">
						<span class="circle-1"></span>
						<span class="text"> 自检失败数：</span>
					</p>
					<p class="p num">
						56.0%
					</p>
				</div>
			</div>
			<div class="line"></div>
			<div class="list">
				<div class="item">
					<p class="p">
						<span class="circle-2"></span>
						<span class="text"> 自检总数：</span>
					</p>
					<p class="p num">
						56.0%
					</p>
				</div>
			</div>
		</div>
	</body>
</html>
